<template>
    <div class="mac-window">
        <div class="title-bar" style="display: flex;">
            <div class="buttons">
                <span class="button close"></span>
                <span class="button minimize"></span>
                <span class="button zoom"></span>
            </div>
            <h1>&nbsp;&nbsp;&nbsp;&nbsp;HikerSystem</h1>
        </div>
        <div style="display: flex;">
          <div class="scrollable-sidebar">
            <br/>
            <p style="margin: 20px 3px 15px 3px; background-color: gray; border-radius: 0;" >
                <router-link :to="'/home?UID=' + this.$route.query.UID" class="a" style="color:aliceblue"><img src="..\assets\backspace.png" width="12" height="12"/>返回主页</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/create_team?UID=' + this.$route.query.UID" class="a"><img src="..\assets\mine.png" width="12" height="12"/>创建队伍</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/join_team?UID=' + this.$route.query.UID" class="a"><img src="..\assets\new.png" width="12" height="12"/>加入队伍</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/application?UID=' + this.$route.query.UID" class="a"><img src="..\assets\documents.png" width="12" height="12"/>管理申请</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/account?UID=' + this.$route.query.UID" class="a"><img src="..\assets\documents.png" width="12" height="12"/>我的信息</router-link>
            </p>
          </div>
          

    

          <div class="main-sidebar">
            <p style="font-weight: bold; font-size: large;">推荐目的地</p>
            <div class="recommendations">
    <div class="tabs">
      <span class="tab active">周末假期</span>
      <span class="tab">度假计划</span>
      <span class="tab">跟团游</span>
      <span class="tab">长期旅行</span>
    </div>
    <div class="destination-list">
      <div
        class="destination-card"
        v-for="(destination, index) in destinations"
        :key="index"
      >
        <img :src="destination.image" alt="destination image" class="destination-image" />
        <h3>{{ destination.title }}</h3>
        <a :href="destination.a" target="_blank" class="detail">{{ destination.description }}</a>
        <div class="details">
          <span><i class="icon icon-time"></i> 三天两夜</span>
          <span class="price">¥ {{ destination.price }}</span>
        </div>
      </div>
    </div>
  </div>
           <!-- <img src='..\assets\Group 39706.png' width=900> ---->

          </div>
        </div>
    </div>
</template>

<script>
import '../assets/mac.css';
import axios from 'axios';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
export default{


    data() {
    return {
      destinations: [
      {
          image: 'src/assets/xinjiapo.jpg',
          title: '新加坡',
          description: '古称淡马锡，旧称新嘉坡、星洲或星岛...',
          price: '6099',
          a: 'https://baike.baidu.com/item/%E6%96%B0%E5%8A%A0%E5%9D%A1/145065?fr=api_search_scenic'
        },
        {
          image: 'src/assets/mangu.png',
          title: '曼谷',
          description: '繁华的国际大都市，是贵金属和宝石的...',
          price: '3566',
          a: 'https://baike.baidu.com/item/%E6%9B%BC%E8%B0%B7/412946'
        },
        {
          image: 'src/assets/bali.jpg',
          title: '巴黎',
          description: '法国首都巴黎是欧洲主要城市，也是全...',
          price: '4488',
          a: 'https://baike.baidu.com/item/%E5%B7%B4%E9%BB%8E/858'
        },
        {
          image: 'src/assets/maerdaifu.jpg',
          title: '马尔代夫',
          description: '旅游业、船运业是马尔代夫主要经济支...',
          price: '11212',
          a: 'https://baike.baidu.com/item/%E9%A9%AC%E5%B0%94%E4%BB%A3%E5%A4%AB/156155'
        },
        {
          image: 'src/assets/lundun.jpg',
          title: '伦敦',
          description: '伦敦作为一个交通枢纽和重要城市已经...',
          price: '21275',
          a: 'https://baike.baidu.com/item/%E4%BC%A6%E6%95%A6/862'
        },
        {
          image: 'src/assets/niuyue.jpg',
          title: '纽约',
          description: '纽约市是美国乃至全球的经济、金融、...',
          price: '14577',
          a: 'https://baike.baidu.com/item/%E7%BA%BD%E7%BA%A6/6230'
        },
        {
          image: 'src/assets/xizang.jpg',
          title: '西藏',
          description: '西藏自治区不仅有世界屋脊奇异的地质...',
          price: '1780',
          a: 'https://baike.baidu.com/item/%E8%A5%BF%E8%97%8F%E8%87%AA%E6%B2%BB%E5%8C%BA/242417?fromtitle=%E8%A5%BF%E8%97%8F&fromid=130045'
        },
        {
          image: 'src/assets/xishuangbanna.png',
          title: '西双版纳',
          description: '西双版纳是中国热带生态系统保存最完...',
          price: '3300',
          a: 'https://baike.baidu.com/item/%E8%A5%BF%E5%8F%8C%E7%89%88%E7%BA%B3%E5%82%A3%E6%97%8F%E8%87%AA%E6%B2%BB%E5%B7%9E/5622791?fromtitle=%E8%A5%BF%E5%8F%8C%E7%89%88%E7%BA%B3&fromid=382982'
        },
      ],
    };
  },


setup() {
    const route = useRoute();
    return route;
}
}

</script>



<style scoped>
.detail {
    color:black;
    font-style: italic;
}

.recommendations {
  padding: 20px;
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
}

.tab.active {
  border-bottom: 2px solid black;
  font-weight: bold;
}

.destination-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.destination-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  width: 300px;
  margin: 10px;
}

.destination-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.icon {
  margin-right: 5px;
}

.price {
  color: red;
  font-weight: bold;
}


.a {
    display: inline-block;
    color:rgb(54, 54, 54);
    font-size: 16px;
    font-weight: bold;
    margin-right: 2vw;
}

.a:active {
    color: aliceblue;
    background-color: transparent;
}
</style>